<template>
    <div>
       
        <h2>门店增加</h2>
        <table class="table table-bordered">
            <tr>
                <td align="right">门店名称</td>
                <td><input type="text" v-model="state.sName" ></td>
            </tr>
            <tr>
                <td align="right">门店电话</td>
                <td><input type="text" v-model="state.sPhone" ></td>
            </tr>
            <tr>
                <td align="right">地址</td>
                <td><input type="text" v-model="state.address" ></td>
            </tr>
            <tr>
                <td align="right">门店图片</td>
                <td>
                    <input type="file" @change="change">
                    <img :src="src" alt="" width="100" height="100" />
                </td>
            </tr>
            <tr>
                <td align="right">有效日期</td>
                <td><input type="date" v-model="state.yxTime" ></td>
            </tr>
            <tr>
                <td align="right">营业日期</td>
                <td><input type="date" v-model="state.useTime" ></td>
            </tr>
            <tr>
                <td align="right"></td>
                <td><input type="button" value="增加" @click="add" ></td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { reactive,toRefs } from 'vue';
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
let router=useRouter()
let data=reactive({
    state:{
  sName: "",
  sPhone: "",
  address: "",
  pic: "",
  yxTime: "",
  useTime: "",
    },
src:''
})
let {state,src}=toRefs(data)

const add=()=>{
    if(state.value.sName==""){
        alert("名称不能为空")
        return;
    }
    if(state.value.sPhone==""){
        alert("电话不能为空")
        return;
    }
    if(state.value.address==""){
        alert("地址不能为空")
        return;
    }
    if(state.value.address.length>=6){
        alert("地址输入必须大于6个字符")
        return;
    }
    if(state.value.yxTime==""){
        alert("有效日期不能为空")
        return;
    }
    if(state.value.useTime==""){
        alert("营业日期不能为空")
        return;
    }
    let obj={
        sName: state.value.sName,
  sPhone: state.value.sPhone,
  address: state.value.address,
  pic: state.value.pic,
  yxTime: state.value.yxTime,
  useTime: state.value.useTime,
    }
    axios({
        url:'/api/Store/StoreAdd',
        method:'post',
        data:obj
    })
    .then(res=>{
        console.log(res)
        if(res.data.data==1){
            alert("添加成功")
          router.push('/list')
        }
        else{
            alert("添加失败")
            return;
        }
    })
    .catch(err=>{
        console.log(err)
    })
}


const change=(e:any)=>{
    let fromData=new FormData()
    let obj=e.target.files[0]
    fromData.append('file',obj)
    axios({
        url:'/api/Common/GetPic',
        method:'post',
        data:fromData
    })
    .then(res=>{
        console.log(res)
        if(res.data.code==1000){
            alert("上传成功")
            src.value="https://localhost:7028"+res.data.filename
            state.value.pic="https://localhost:7028"+res.data.filename
        }
        else{
            alert("上传失败")
        }
    })
    .catch(err=>{
        console.log(err)
    })
}

</script>

<style scoped></style>